<template>
  <div
    @click="$emit('view')"
    class="bg-white todo-item rounded-10px relative overflow-hidden"
  >
    <div class="border-b border-solid border-neutral-100 px-12px py-16px">
      <div class="flex items-center">
        <Tag
          v-if="item.type === 1"
          color="rgba(11, 97, 255, 0.1)"
          text-color="#1D6FE9"
          class="!px-6px !py-3px !font-500 whitespace-nowrap"
        >
          拜访
        </Tag>
        <Tag
          v-if="item.type === 2"
          color="rgba(87, 174, 89, 0.1)"
          text-color="#57AE59"
          class="!px-6px !py-3px !font-500 whitespace-nowrap"
        >
          回访
        </Tag>
        <Tag
          v-if="item.type === 3"
          color="rgba(245, 137, 78, 0.1)"
          text-color="#F5894E"
          class="!px-6px !py-3px !font-500 whitespace-nowrap"
        >
          扫街
        </Tag>
        <!-- <span class="ml-6px text-16px font-500 text-dark-300">
          {{
            item.fromUserJobNo === item.toUserJobNo
              ? "由您自己发起"
              : `${item.fromUsername}指派${item.toUserName}`
          }}
        </span> -->
        <span
          class="ml-6px text-16px font-500 text-dark-300"
          v-if="
            item.fromUserId == item.userId && item.userId == item.signUserId
          "
        >
          由自己创建
        </span>
        <span
          class="ml-6px text-16px font-500 text-dark-300"
          v-else-if="
            item.fromUserId == item.userId && item.userId != item.signUserId
          "
        >
          由{{ item.fromUsername }}创建
        </span>
        <span
          class="ml-6px text-16px font-500 text-dark-300"
          v-else-if="
            item.fromUserId != item.userId && item.userId == item.signUserId
          "
        >
          由{{ item.fromUsername }}指派给我
        </span>
        <span
          class="ml-6px text-16px font-500 text-dark-300"
          v-else-if="
            item.fromUserId != item.userId && item.userId != item.signUserId
          "
        >
          {{ item.fromUsername }}指派{{ item.toUserName }}
        </span>
      </div>
      <div class="mt-12px text-13px font-400 leading-20px">
        {{ todoDesc }}
      </div>
    </div>
    <template v-if="_getTodoActions(item).length > 1">
      <div class="flex p-5px items-center">
        <div class="flex-1 text-center">
          <Button
            @click.stop="$emit(_getTodoActions(item)[0].eventName)"
            class="!border-none"
            type="primary"
            block
            plain
          >
            {{ _getTodoActions(item)[0].text }}
          </Button>
        </div>
        <div class="btn-line"></div>
        <div class="flex-1 text-center">
          <Button
            @click.stop="$emit(_getTodoActions(item)[1].eventName)"
            class="!border-none"
            type="primary"
            block
            plain
          >
            {{ _getTodoActions(item)[1].text }}
          </Button>
        </div>
      </div>
    </template>

    <template v-else>
      <div class="flex p-5px items-center">
        <div class="flex-1 text-center">
          <Button
            @click.stop="$emit(_getTodoActions(item)[0].eventName)"
            class="!border-none"
            type="primary"
            block
            plain
          >
            {{ _getTodoActions(item)[0].text }}
          </Button>
        </div>
      </div>
    </template>
    <div
      class="absolute top-0 right-0 text-white px-8px py-4px rounded-tr-10px rounded-bl-10px text-10px leading-14px"
      :style="{ background: item.todoStatus !== 30 ? '#f5894e' : '#F55F4E' }"
    >
      {{ _filterStatus(item.isValid, item.todoStatus) }}
    </div>
  </div>
</template>

<script>
import { Button, Tag } from "vant";
import { TODO_STATUS } from "@/constants";
export default {
  props: {
    item: {
      type: Object,
    },
  },
  components: {
    Button,
    Tag,
  },
  computed: {
    todoDesc() {
      const { type, address, opportunityName, kpName, kpId } = this.item;
      if (type === 1) {
        // 拜访
        return `去${address}拜访${opportunityName}的${kpName}(${kpId})`;
      } else if (type === 2) {
        // 回访
        return `去${address}回访${opportunityName}的${kpName}(${kpId})`;
      } else {
        // 扫街
        return `去${address}扫街`;
      }
    },
  },
  methods: {
    _filterStatus(isValid, status) {
      if (isValid === 1) return "已取消";
      const [statusItem] = TODO_STATUS.filter(({ key }) => key === status);
      return statusItem.text;
    },
    _getTodoActions(item) {
      const { todoStatus, isValid } = item;
      if (isValid === 1) {
        // 取消
        return [{ text: "详情", eventName: "view" }];
      } else if (todoStatus === 10) {
        // 待申请
        return [
          // { text: "详情", eventName: "view" },
          { text: "取消外出", eventName: "cancel" },
          { text: "外出申请", eventName: "apply" },
        ];
      } else if (todoStatus === 20) {
        // 待审核
        return [{ text: "详情", eventName: "view" }];
      } else if (todoStatus === 30) {
        // 已驳回
        return [{ text: "详情", eventName: "view" }];
      } else if (todoStatus === 40) {
        // 待签到
        return [
          { text: "取消外出", eventName: "cancel" },
          { text: "签到", eventName: "clock-in" },
        ];
      } else if (todoStatus === 41) {
        // 待签出
        return [
          { text: "详情", eventName: "view" },
          { text: "签出", eventName: "clock-out" },
        ];
      } else if (todoStatus === 50) {
        // 待跟进
        return [
          { text: "详情", eventName: "view" },
          { text: "跟进", eventName: "follow" },
        ];
      } else if (todoStatus === 60) {
        // 已完成
        return [{ text: "详情", eventName: "view" }];
      } else if (todoStatus === 80) {
        // 待接收
        return [
          { text: "拒绝接收", eventName: "refuse" },
          { text: "同意接收", eventName: "accept" },
        ];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.todo-item {
  .btn-line {
    @apply h-20px px-5px flex;
    &:after {
      content: "";
      width: 1px;
      height: 20px;
      background-color: #f5f5f5;
    }
  }
  & + .todo-item {
    @apply mt-12px;
  }
}
</style>
